import React from 'react';
import { Text, View,FlatList,StyleSheet,Image,Dimensions} from 'react-native';
import TabIcon from './components/TabIcon'
import Home from './components/Home';
import List from './components/List';
import Setting from './components/Setting'
import Datiles from './components/Datiles'
import Cart from './components/Cart'
import Detial from './components/Productdetial'
import {AppLoading} from 'expo/build/Expo'
import {Router,Stack,Scene,Tabs} from 'react-native-router-flux'
import { Provider } from 'react-redux'
import store from "./store"



const RightButton =props=>{
    return(
        <View>
            <Text onPress={()=>{
                props._increase()
            }}>右边按钮</Text>
        </View>
    )
}
export default class App extends React.Component{
    constructor(props){
        super(props);
        this.state={
            loading:true
        }
    }
    async componentWillMount() {
        await Expo.Font.loadAsync({
          'Roboto': require('./Fonts/Roboto.ttf'),
          'Roboto_medium': require('./Fonts/Roboto_medium.ttf'),
        });
        this.setState({
            loading:false
        })
      }
  
    render(){
       if(this.state.loading){
           return(
               <AppLoading/>
           )
       }
       return(
        <Provider store={store}> 
          <Router>
              <Tabs key="tabbar"
              activeBackgroundColor="#e5e5e5"
              inactiveBackgroundColor="white"
              >
                <Stack key="root" title="首页" navigationBarStyle={{backgroundColor:'white'}} icon={TabIcon} iconName="home" hideNavBar>
                    <Scene 
                    key="datiles" 
                    component={Datiles} 
                    title="设置页" 
                    backButtonTintColor="red"
                    titleStyle={{color:'black'}}
                    renderRightButton={RightButton}
                    />
                    <Scene key="home" component={Home} title="首页" initial/>
                </Stack>
                <Stack key="lists" title="产品页"navigationBarStyle={{backgroundColor:'white'}} icon={TabIcon} iconName="shopping-basket">
                <Scene 
                    key="detial" 
                    component={Detial} 
                    title="详情页" 
                    backButtonTintColor="red"
                    titleStyle={{color:'black'}}
                    />
                    <Scene key="list" component={List} title="产品页" initial/>
                </Stack>
                <Stack key="carts" title="购物车"navigationBarStyle={{backgroundColor:'white'}} icon={TabIcon} iconName="cart-arrow-down">
                    <Scene key="cart" component={Cart} title="购物车" initial/>
                </Stack>
                <Stack key="settings" title="我的"navigationBarStyle={{backgroundColor:'white'}} icon={TabIcon} iconName="user" hideNavBar>
                    <Scene key="settings" component={Setting} title="我的" initial/>
                </Stack>
              </Tabs>
          </Router>
        </Provider>
       )
    }
}